import React from 'react';
import { Card, Typography, Table, Tag, Button } from 'antd';
import { DownloadOutlined, EyeOutlined } from '@ant-design/icons';

const { Title } = Typography;

const HistoryPage = () => {
  const columns = [
    {
      title: '文件名',
      dataIndex: 'fileName',
      key: 'fileName',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type) => (
        <Tag color={type === 'image' ? 'blue' : 'green'}>
          {type === 'image' ? '图片' : '视频'}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const statusMap = {
          completed: { color: 'success', text: '已完成' },
          processing: { color: 'processing', text: '处理中' },
          failed: { color: 'error', text: '失败' },
        };
        const { color, text } = statusMap[status] || { color: 'default', text: status };
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '处理时间',
      dataIndex: 'processingTime',
      key: 'processingTime',
      render: (time) => `${time}秒`,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <div>
          <Button 
            type="link" 
            icon={<EyeOutlined />}
            onClick={() => console.log('查看', record)}
          >
            查看
          </Button>
          {record.status === 'completed' && (
            <Button 
              type="link" 
              icon={<DownloadOutlined />}
              onClick={() => console.log('下载', record)}
            >
              下载
            </Button>
          )}
        </div>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      fileName: 'sample-image.jpg',
      type: 'image',
      status: 'completed',
      processingTime: 15,
      createdAt: '2024-12-01 10:30:00',
    },
    {
      key: '2',
      fileName: 'sample-video.mp4',
      type: 'video',
      status: 'processing',
      processingTime: 45,
      createdAt: '2024-12-01 11:00:00',
    },
    {
      key: '3',
      fileName: 'test-image.png',
      type: 'image',
      status: 'failed',
      processingTime: 0,
      createdAt: '2024-12-01 09:15:00',
    },
  ];

  return (
    <div className="history-page">
      <Title level={2}>处理历史</Title>
      
      <Card>
        <Table 
          columns={columns} 
          dataSource={data}
          pagination={{
            total: data.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => 
              `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
        />
      </Card>
    </div>
  );
};

export default HistoryPage; 